<template>
  <el-form :model="step" ref="form" :rules="rules" label-width="100px">
    <el-form-item label="步骤名称" prop="name">
      <el-input v-model="step.name"></el-input>
    </el-form-item>
    <el-form-item label="错误处理步骤">
      <el-select v-model="step.send_false_to" placeholder="错误处理步骤">
        <el-option v-for="next in nextSteps" :label="next.name" :value="next.id"></el-option>
      </el-select>
    </el-form-item>
    <el-button icon="plus" @click="addRecord"></el-button>
    <!--<help-info></help-info>-->
    <br><br>
    <el-form-item label-width="0px">
      <el-table :data="step.fields" stripe :max-height="350">
        <el-table-column type="index" label="编号" :width="80"></el-table-column>
        <el-table-column prop="validation_name" label="条件名称" :width="280"></el-table-column>
        <el-table-column label="操作" :width="140" class-name="table-row">
          <template scope="scope">
            <el-row>
              <el-col :span="12">
                <el-button size="small" type="info" @click="showEditor(scope.$index)">编辑</el-button>
              </el-col>
              <el-col :span="12">
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <modal  v-model="showModal" title="条件编辑">
      <editor :field="step.fields[currentIndex]" :availableFields="step.availableFields"></editor>
    </modal>
  </el-form>
</template>

<script>
  import {Steps,Fields} from "../../model/DataModel";
  import StepCommon from "./mixins/StepMixin";
  import Editor from "./innerEditor/ValidatorEditor.vue";
  import Modal from "../Modal.vue";

  export default{
    mixins: [StepCommon],
    components: {Modal, Editor},
    data(){
      return {
        step: Steps.Validator(),
        showModal: false,
        currentIndex: 0
      }
    },
    watch: {
      //修改标记
      'step.send_false_to'(newId, oldId){
        let labelId = "falseLabel", id = this.step.id;
        try {
          if (newId) {
            this.$store.commit('changeLabel', {id, newId, oldId, labelId})
          } else {
            //不传newId,移除标记
            this.$store.commit('changeLabel', {id, oldId, labelId})
          }
        } catch (err) {
          this.step.send_false_to = "";
        }

      }
    },
    computed:{
        numArray(){
            return this.step.fields.map(el=>el._num).sort((a,b)=>a>b);
        }
    },
    methods: {
      showEditor(index){
        this.showModal = true;
        this.currentIndex = index;
      },
      addRecord(){
          let index=1;
          if (this.numArray.length>0){
              this.numArray.forEach(el=>{
                 if(index==el){
                     index+=1
                 }
              })
          }
          this.step.fields.push(Fields.Validator({validation_name:"数据校验"+index,_num:index}))
      }
    }
  }
</script>
